/** * Copyright (c) 2020 kedacom * OpenATC is licensed under Mulan PSL v2. * You
can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at: *
http://license.coscl.org.cn/MulanPSL2 * THIS SOFTWARE IS PROVIDED ON AN "AS IS"
BASIS, WITHOUT WARRANTIES OF ANY KIND, * EITHER EXPRESS OR IMPLIED, INCLUDING
BUT NOT LIMITED TO NON-INFRINGEMENT, * MERCHANTABILITY OR FIT FOR A PARTICULAR
PURPOSE. * See the Mulan PSL v2 for more details. **/
<template>
  <div class="patternConfigIframe">
    <div class="rowIframe">
      <div>
        <button class="test-button">按钮开始</button>
        <button class="test-button2">按钮查询</button>
      </div>
      <div style="width: 900PX; height: 500PX;">
        <iframe
          id="frameObj"
          src="http://localhost:9528/#/patternConfig?isShowMenu=false"
          frameborder="0"
          width="100%"
          height="100%"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'patternConfigIframe',
  data () {
    return {
      isShowSingle: true,
      isOnlyOneTab: true,
      isAllowedExpand: true,
      agentids: [],
      opt: {}
    }
  },
  components: {
    // Messagebox
  },
  props: {},
  watch: {},
  mounted () {
    const params = {
      method: 'init',
      data: {
        agentids: ['gjnlahql'],
        opt: {
          optPatternList: [
            // {
            //   name: '杰斯安的房间里 1',
            //   devs: [
            //     {
            //       agentid: 'gjnlahql',
            //       patternid: 1,
            //       isused: true
            //     },
            //     {
            //       agentid: 'xylsnl',
            //       patternid: 1,
            //       isused: true
            //     },
            //     {
            //       agentid: 'cslyll',
            //       patternid: 2,
            //       isused: false
            //     }
            //   ]
            // }
          ]
        }
      },
      config: {
        prefix: '',
        token: '',
        host: '',
        isShowSingle: false,
        isOnlyOneTab: false,
        isAllowedExpand: false
      }
    }
    console.log(params)
    const params3 = {
      method: 'init',
      data: {
        agentids: [
          'tjblxyl',
          'jmlfql',
          'tjbllyl',
          'tjblfql',
          'jmlytl',
          'tjbljml',
          'gjnljml',
          'gjnlahql',
          'tjblgjxl',
          'gjnlgjxl',
          'tjblsxl'
        ],
        opt: {
          optPatternList: []
        }
      },
      config: {
        prefix: '',
        token: '',
        host: '',
        isShowSingle: false,
        isOnlyOneTab: false,
        isAllowedExpand: false
      }
    }
    // 容器父页面js代码
    // @ts-ignore
    document.querySelector('.test-button').addEventListener('click', () => {
      // * 表示向所有的iframe发送信息，指定url，就可以定向发送信息
      // @ts-ignore
      // document.getElementById('frameObj').style.height = '492PX'
      // // @ts-ignore
      // document.getElementById('frameObj').style.height = '700PX'
      // @ts-ignore
      document
        .getElementById('frameObj')
        // @ts-ignore
        .contentWindow.postMessage(params3)
    })
    // @ts-ignore
    document.querySelector('.test-button2').addEventListener('click', () => {
      // * 表示向所有的iframe发送信息，指定url，就可以定向发送信息
      const params2 = {
        method: 'getPatternConfig'
      }
      // debugger
      // @ts-ignore
      document
        .getElementById('frameObj')
        // @ts-ignore
        .contentWindow.postMessage(params2)
    })
    window.addEventListener(
      'message',
      function (event) {
        // 接收到容器页面传递到数据
        console.log('event: ', event)
        // debugger
        // @ts-ignore
        const params = event.data
        if (params.method && params.method === 'getPatternConfig') {
          console.log('received serarch res:', params.res)
        }
      },
      false
    )
  },
  destroyed () {},
  methods: {
    init (params) {
      this.agentids = params.agentids
      this.opt = params.opt
      this.isShowSingle = params.isShowSingle
      this.isOnlyOneTab = params.isOnlyOneTab
      this.isAllowedExpand = params.isAllowedExpand
    }
  },
  getPatternConfig () {
    // @ts-ignore
    const res = this.$refs.planContent.pattern_config.getPatternConfig()
    return res
  }
}
</script>

<style lang="scss" scoped>
.patternConfig {
  // width: 800px;
  // height: 500px;
  // border: 1px solid red;
  .row {
    flex: 1;
    overflow: auto;
    width: 100%;
  }
}
</style>
